{"componentChunkName":"component---src-templates-blog-post-js","path":"/Easy-Dark-Mode-Switch-with-React-and-localStorage/","result":{"data":{"site":{"siteMetadata":{"title":"Aleks Popovic - personal website and blog"}},"markdownRemark":{"id":"0cebb04e-a49a-5da2-8cb9-ad9126eda043","excerpt":"Having a dark mode on your website or application has become very popular. Many big websites and applications are coming up with their own version of it and if…","html":"

Having a dark mode on your website or application has become very popular. Many big websites and applications are coming up with their own version of it and if you want to make one for your own react app you can easily do so with very little JavaScript code and a bit of custom CSS.

\n

I am going to show you how you can make a simple, yet versatile React component which you can use to change your website’s mode from light to dark. If you want you can later expand it to handle multiple application skins or themes.

\n

If you prefer a video version you can watch me create this Dark Mode component on Youtube:

\n
\n

I started a new create-react-app project and I’ve modified it a bit by adding some HTML to the App component. There is a simple nav bar, some text paragraphs and an image div that we will use to show how to switch image backgrounds between different page modes.

\n

I also created a new component in the components folder and named it DarkMode.js. We will also add a CSS file for styling it which we will call DarkMode.css. We can import both of them in the App component right away.

\n
import React from \"react\"\nimport \"./styles/App.css\"import DarkMode from \"./components/DarkMode\"\nfunction App() {\n  return (\n    <div className=\"App\">\n      <nav>        <a href=\"/\">Home</a>        <a href=\"/\">Projects</a>        <a href=\"/\">About</a>        <a href=\"/\">Contact</a>        <DarkMode />      </nav>      <h1>Hello World</h1>      <div id=\"image\"></div>      <p>        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget        scelerisque neque, quis scelerisque erat. Quisque venenatis molestie        sapien, dapibus viverra nulla hendrerit eget. Pellentesque egestas        ultrices accumsan. Ut ac magna vel ex maximus ultricies. Nulla facilisi.        Suspendisse gravida sem eu odio mattis ullamcorper. Curabitur feugiat        ipsum vel vulputate ultricies.      </p>      <p>        Praesent pulvinar faucibus risus in iaculis. Sed erat felis, pretium sit        amet ultricies non, porta et lacus. Curabitur a urna mi. Sed eleifend        sed erat eget viverra. Quisque sit amet purus viverra massa posuere        congue. Suspendisse efficitur venenatis enim, id hendrerit enim ultrices        sed. Nam sed dapibus nisi.      </p>    </div>  )\n}\n\nexport default App
\n

We will start building out the component by making it a constant with no inputs and export it as a default. Its basic functionality is going to be returning a button element which we will use to change the mode or theme. Lets import the CSS file right away and we will change its contents later.

\n
import React from \"react\"\nimport \"../styles/DarkMode.css\"\n\nconst DarkMode = () => {\n  return <button></button>\n}\n\nexport default DarkMode
\n

For everything to work we need to set up a few properties.

\n
import React from \"react\"\nimport \"../styles/DarkMode.css\"\n\nconst DarkMode = () => {\n  let clickedClass = \"clicked\"  const body = document.body  const lightTheme = \"light\"  const darkTheme = \"dark\"  let theme\n  return <button></button>\n}\n\nexport default DarkMode
\n

The body is the document’s body element. We need a reference to it so we can apply different styling to it once we click the dark mode button. Light theme and dark theme are going to be the class names that we will apply to the body. Theme is a local property which we will use to handle the currently selected theme or mode.

\n

The clicked class is going to be applied to the button when we click on it. This way we will signal the change of its state. Since we are mentioning state you may be wondering if we will use react’s state to set up our logic and the answer is no, we will not. We could, but it’s a really simple use case that doesn’t require it. What we will do is use the local storage, which is browser’s internal memory space designed just for stuff like this. It has a limited memory capacity and it’s not considered secure, but it’s perfect for a situation like this where you just need to keep track of a single property value. Local storage is also very handy because its values persist when you switch the page or close the browser altogether, so you can set the values and not worry about them getting deleted or expiring.

\n

In terms of JavaScript - the local storage is an object which is a part of the window object, so we can access it directly and try to find an item that’s stored inside. For this we use the getItem function and pass in the property we are looking for.

\n
import React from \"react\"\nimport \"../styles/DarkMode.css\"\n\nconst DarkMode = () => {\n  let clickedClass = \"clicked\"\n  const body = document.body\n  const lightTheme = \"light\"\n  const darkTheme = \"dark\"\n  let theme\n\n  if (localStorage) {    theme = localStorage.getItem(\"theme\")  }  if (theme === lightTheme || theme === darkTheme) {    body.classList.add(theme)  } else {    body.classList.add(lightTheme)  }\n  return <button></button>\n}\n\nexport default DarkMode
\n

In this case we will be expecting to find one of the two values - light or dark, because these are the values we will be setting in the local storage. If we find such value we will add that CSS class to the document body. If not we will default to not using the dark mode by setting the light class. Of course, if you want dark mode to be the default value you can do that too.

\n

To make our button do something on click we need to set up an on click event for it which we’ll call the switchTheme function. We will also add an id to it so we can style it more easily later, and we will add the clicked class to it if the dark mode is on.

\n
import React from \"react\"\nimport \"../styles/DarkMode.css\"\n\nconst DarkMode = () => {\n  let clickedClass = \"clicked\"\n  const body = document.body\n  const lightTheme = \"light\"\n  const darkTheme = \"dark\"\n  let theme\n\n  if (localStorage) {\n    theme = localStorage.getItem(\"theme\")\n  }\n\n  if (theme === lightTheme || theme === darkTheme) {\n    body.classList.add(theme)\n  } else {\n    body.classList.add(lightTheme)\n  }\n\n  const switchTheme = e => {    if (theme === darkTheme) {      body.classList.replace(darkTheme, lightTheme)      e.target.classList.remove(clickedClass)      localStorage.setItem(\"theme\", \"light\")      theme = lightTheme    } else {      body.classList.replace(lightTheme, darkTheme)      e.target.classList.add(clickedClass)      localStorage.setItem(\"theme\", \"dark\")      theme = darkTheme    }  }\n  return (\n    <button\n      className={theme === \"dark\" ? clickedClass : \"\"}      id=\"darkMode\"      onClick={e => switchTheme(e)}    ></button>\n  )\n}\n\nexport default DarkMode
\n

The switch theme function is going to check which theme is currently active and do a couple of different things depending on that. If the dark mode is currently on it will replace the dark theme body class with the light one. It will remove the clicked class from the dark mode button and set the local storage theme property to light. Finally, we will set the theme property to light theme, since dark mode will no longer be active.

\n

In case the dark mode was already off we will want to turn it on. To do that we will do almost the same thing as before. We replace the light theme body class with the dark one, mark the button as clicked, set the local storage property to dark and finally set the theme to dark.

\n

With this, our component is finished and we can import it inside of the App component. Now we need to set up its CSS.

\n
#darkMode {\n  background: transparent url(\"../moon.png\") no-repeat center;\n  background-size: 30px 30px;\n  width: 45px;\n  height: 45px;\n  filter: grayscale(100%);\n  border: none;\n  border-radius: 50%;\n  transition: background-color 0.3s ease-in-out, filter 0.3s ease-in-out;\n}\n\n#darkMode:hover,\n#darkMode:focus {\n  filter: none;\n  background-color: black;\n  cursor: pointer;\n}\n\n#darkMode.clicked {\n  filter: none !important;\n  background-color: black;\n}
\n

Our button has the dark mode Id so that’s what we will use to style it. For the background image I am using a moon icon that I found on flaticon.com. I am setting its dimensions and borders so it’s shaped like a circle and I’m adding it a grayscale filter so it looks grayed-out when in default non-clicked state.

\n

For hover and focus states we are going to remove the filter and set the background to black, so the icon looks like a yellow moon and stars with a night sky background. We will do the same for the clicked button class.

\n

Our components CSS is now set up and we need to take care of the two body classes, one for dark mode and one for light mode. To change between two different looks we will use CSS variables. You can declare them anywhere you want if the body element has access to them. As as start we will add two color variables in the root selector.

\n
:root {\n  --blue: rgb(26, 57, 87);\n  --white: rgb(236, 236, 236);\n}
\n

To simplify the example I will use the white color for background and the blue color for text in light mode and we will switch between them when we turn on the dark mode. To do so we will add more CSS variables inside of the light class selector, which will use the variables from the root. We will also modify the font weight when switching themes, as well as the background image below the hello world heading. This is not something I recommend doing, especially for the background image, but it is an option if you want to play around with it.

\n
body.light {\n  --background-color: var(--white);\n  --text-color: var(--blue);\n  --font-weight: 400;\n  --image: url(\"../day.jpg\");\n}
\n

For the dark mode class we will do something similar. We will switch the colors for background and text, give the font a bit more weight and we’ll use a different night time image.

\n
body.dark {\n  --background-color: var(--blue);\n  --text-color: var(--white);\n  --font-weight: 500;\n  --image: url(\"../night.jpg\");\n}
\n

Now that we have dark and light mode classes set up we need to make the body selector use them, which is easy enough. Just set your properties to use the correct CSS variables. We can also set our background and color transition so the mode switch isn’t so sudden.

\n
body {\n  background: var(--background-color);\n  color: var(--text-color);\n  font-weight: var(--font-weight);\n  transition: background 0.3s ease-in-out, color 0.6s ease-in-out;\n}
\n

Of course, we also need to set up the image container to use the image variable.

\n
#image {\n  width: 100%;\n  height: 300px;\n  background-attachment: fixed;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  transition: background-image 0.7s ease-in-out;\n  background-image: var(--image);\n}
\n

If we want to take this a bit further, we can also set up the nav bar to change the background and text color in different modes.

\n
nav {\n  padding: 1rem 25%;\n  margin: 0 auto;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  background: var(--text-color);\n}\n\nnav a {\n  text-decoration: none;\n  text-transform: uppercase;\n  color: var(--background-color);\n}
\n

If you followed through everything you should now have your own functioning customizable dark mode switch built in React. If you want to take a closer look at the project code you can grab the source files on GitHub along with all of the images I used for it.

\n
\n
If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.\n

I also have a YouTube channel where I regularly upload React and web dev tutorials, so if that’s your cup of tea feel free to support me by subscribing.

","frontmatter":{"title":"Easy Dark Mode Switch with React and localStorage","series":null,"seriesLink":null,"date":"September 12, 2020","description":"Having a dark mode on your website or application has become very popular. Many big websites and applications are coming up with their own version of it and if you want to make one for your own React app you can easily do so with very little JavaScript code and a bit of custom CSS. ","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACOElEQVQozy3Q20+SARzGcf6MDpum8b4vumVbJ0xJE21qpqV4gNpCFGUKCuIJQxQUms5Dp6WZZRZMw5IVtaKc1YWtg6sLr2y5ddG6aG2tLrv69r7UxXP7+f2eRyWU+hBrxxEbZ5C6ltD4nyL5E0g9MSRvHLFhBnWOE3VeJ2JBL6n7jOwQCkg7YEXQdaDObZfjRMhpRzjchkoTSKA5v4oUXEEafILYHyfTc48MVwSxPYxgmUIyhNDUjpGqd2OrqWIx5MJsamDXITvif0id7UCQo9J4Yqg7ltFafZyoLeN4VTGVZ6vRm8zU1egw1BVisBjJNE2w55iDoK2B9chVpoNB1NpWBK1dhuxJTK18KMkfpDfOkd90DqPNRGNPExWuTsqd3Vi6LJht1VTWN7GzaJDskk5udzi473Ey6fGxPatZRv+BCqbUVkmuBbnaAkenVsmfiFM09Rz9ZDwZXWABqTxAirzdwdNjGJ2XsFYYsGZrGfeF5IPX5H3b2C1XT9ZWQMEwingqxBHvLDrvLfL98+QNzFEwNE/WmRDpeg/1zousvHpNZDFGt91NwN7Mxsd3/Pj9i3A0QZoCKlsmwUIPQkk/QrFXTj9ixRDiyWGkmhHSzNMUtlxhY2mWTy+WSUQjPLwTZmvtEV8/POPzxlu+b76n2DRMyv4WxFwFLB1AKPMjmi4gWqYRW+eR3FEyemOk9D3GHZxh6+5lNh/c4ProCI6WPt4s3eTbyyg/1+P8+bKG2zfLtr3NSDonfwESF2PaMFiJFwAAAABJRU5ErkJggg==","aspectRatio":2.6666666666666665,"src":"/static/c84963620317fe9242f44fecd322767a/0e6e2/darkNew.png","srcSet":"/static/c84963620317fe9242f44fecd322767a/b460a/darkNew.png 480w,\n/static/c84963620317fe9242f44fecd322767a/6e898/darkNew.png 960w,\n/static/c84963620317fe9242f44fecd322767a/0e6e2/darkNew.png 1920w","srcWebp":"/static/c84963620317fe9242f44fecd322767a/30cf3/darkNew.webp","srcSetWebp":"/static/c84963620317fe9242f44fecd322767a/35871/darkNew.webp 480w,\n/static/c84963620317fe9242f44fecd322767a/fcc10/darkNew.webp 960w,\n/static/c84963620317fe9242f44fecd322767a/30cf3/darkNew.webp 1920w","sizes":"(max-width: 1920px) 100vw, 1920px"}}}}}},"pageContext":{"slug":"/Easy-Dark-Mode-Switch-with-React-and-localStorage/","previous":{"excerpt":"Having different page files for different languages makes all of the page translations pretty contained and easy for access if something…","fields":{"slug":"/Translating-React-components/"},"frontmatter":{"date":"August 16, 2020","title":"Translating React components","series":"How to Build a Multilingual Website with Gatsby and React","description":"Having different page files for different languages makes all of the page translations pretty contained and easy for access if something needs to be changed or added later on. Separating page components is good because of searching algorithms and SEO. There is also no code duplication, since page components are mostly plain text or markdown. Non-page components are a bit different.","tags":["web","react","multilingual"],"featuredImage":{"id":"a3034fe9-222e-533f-93ea-8fe775679692","publicURL":"/static/23e2c2b486f8733000f90e001c759f59/translating.png","relativeDirectory":"Translating-React-components","relativePath":"Translating-React-components/translating.png"}}},"next":{"excerpt":"A couple of days ago I noticed something interesting in the Netflix mobile app. It has a Coming Soon page which shows movies and TV shows…","fields":{"slug":"/How-to-build-Netflix's-Coming-Soon-page-in-React/"},"frontmatter":{"date":"November 02, 2020","title":"How to build Netflix's Coming Soon page in React","series":null,"description":"A couple of days ago I noticed something interesting in the Netflix mobile app. It has a Coming Soon page which shows movies and TV shows that are soon coming to Netflix. It has a few interesting functionalities. It's loading data from somewhere and sorting it into cards. You can bookmark a movie to let Netflix know you want to be notified when it comes out. It has a cool, modern looking share menu for which you need to manage state.","tags":["web","react"],"featuredImage":{"id":"59c8483f-d2af-5184-adf0-53d144e51701","publicURL":"/static/7a22096a1108d65c7262e5302662aef1/netflix.png","relativeDirectory":"How-to-build-Netflix's-Coming-Soon-page-in-React","relativePath":"How-to-build-Netflix's-Coming-Soon-page-in-React/netflix.png"}}}}}}